<template>
    <div class='dataList'>
        <!-- 按钮 -->
        <el-button size='small' @click='toAddPage'>上报</el-button>

        <!-- 表格 -->
        <el-table
            size='small'
            :data="tableData"
            style="width: 100%">
            <el-table-column
                prop="id"
                label="编号"
                width="80">
            </el-table-column>
            <el-table-column
                prop="country"
                label="国"
                width="80">
            </el-table-column>
            <el-table-column
                prop="province"
                label="省"
                width="120">
            </el-table-column>
            <el-table-column
                prop="city"
                label="市"
                width="100">
            </el-table-column>
            <el-table-column
                prop="area"
                label="区"
                width="100">
            </el-table-column>
            <el-table-column
                prop="city"
                label="市"
                width="100">
            </el-table-column>
            <el-table-column>
            </el-table-column>
            <el-table-column
                prop="confirmed"
                label="新增"
                width="80">
            </el-table-column>
            <el-table-column
                prop="suspected"
                label="疑似"
                width="80">
                <!-- 插槽:获取当前行的数据 -->
                <template v-slot='scope'>
                    <el-tag type="success">{{scope.row.suspected}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="dead"
                label="死亡"
                width="80">
                <!-- 插槽:获取当前行的数据 -->
                <template v-slot='scope'>
                    <el-tag type="info">{{scope.row.dead}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="outside"
                label="境外输入"
                width="80">
                <!-- 插槽:获取当前行的数据 -->
                <template v-slot='scope'>
                    <el-tag type="success">{{scope.row.outside}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="inputTime"
                label="输入时间"
                width="140">
                <!-- 插槽:获取当前行的数据 -->
                <template v-slot='scope'>
                    <!-- 管道符 -->
                    {{scope.row.inputTime | dateFMT}}
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页按钮 -->
        <el-pagination
            layout="prev, pager, next"
            :current-page='params.page'
            :page-size='params.pageSize'
            @current-change='chagePage'
            :total="total">
        </el-pagination>
    </div>
</template>

<script>
import axios from '@/http/axios'
// 导入moment库
import moment from 'moment'
export default {
    // data专门用于存放变量的
    data(){
        return {
            tableData:[],
            params:{
                page:1,
                pageSize:10
            },
            total:0
        }
    },
    created(){
        this.queryData()
    },
    // 过滤器，专门用于处理格式
    filters:{
        dateFMT(str){
            return moment(str).format('YYYY-MM-DD HH:mm:ss')
        }
    },
    // 监听器
    watch: {
        // 监听params对象，只要该对象的属性值发生了变化，都可以被监听到，就可以执行函数中的代码
        params:{
            handler:function(){
                this.queryData()
            },
            deep:true
        }
    },
    // methods专门用于存放方法的
    methods:{
        // 跳转到数据上报页面
        toAddPage(){
            this.$router.push({
                path:'/data/dataAdd'
            })
        },
        // 页码改变函数
        chagePage(page){
            this.params.page = page;
        },
        // 查询所有的疫情数据
        queryData(){
            axios({
                url:'http://39.96.21.48:8001/epidemic/pageQuery',
                method: 'get',
                params:this.params
            }).then((res)=>{
                // 将返回结果赋值给表格的数据
                this.tableData = res.data.data.list
                // 将当前疫情总数赋值给分页查询的按钮
                this.total = res.data.data.total
            })
        }
    }
}
</script>